<template>
  <div>
    <div class="maiche-container">
      <!-- 筛选设备类型条件 -->
      <div class="filter-container">
        <div class="filter-group">
          <div class="filter-group-label">设备类型</div>
          <span v-for="type in equipmentTypeList"
             :key="type.typeId" class="filter-tag"
              @click="equipmentTypeSelect(type.typeId)"
              :class="{ 'selected': queryParams.selectedTypeId === type.typeId }">
            {{type.typeName}}
          </span>
          <!-- 更多 -->
          <div class="more-wrapper" @mouseenter="showAllFirstLevel = true" @mouseleave="showAllFirstLevel = false">
            
            <div class="more-panel" v-if="showAllFirstLevel && equipmentTypeSelectList.length > 0">
              <span 
                v-for="type in equipmentTypeSelectList"
                :key="type.typeId"
                class="filter-more-tag level-1"
                @click="equipmentTypeSelect(type.typeId)" 
                :class="{ 'selected': queryParams.selectedTypeId === type.typeId }" >
                {{ type.typeName }}
                <i v-if="equipmentTypeListErJi.length > 0 && queryParams.selectedTypeId === type.typeId" class="el-icon-arrow-down"></i>
              </span>
            </div>
          </div>
          
          <!-- 二级分类 -->
          <div v-if="equipmentTypeListErJi.length > 0" class="level-2-container">
            <span 
              v-for="child in equipmentTypeListErJi"
              :key="child.typeId"
              class="filter-tag level-2"
              @click="equipmentTypeSelectSanJi(child.typeId)"
              :class="{ 'selected': queryParams.selectedTypeId === child.typeId }">
              {{ child.typeName }}
            </span>
          </div>
          
          <!-- 三级分类 -->
          <div v-if="equipmentTypeListSanJi.length > 0" class="level-3-container">
            <span 
              v-for="grandchild in equipmentTypeListSanJi"
              :key="grandchild.typeId"
              class="filter-tag level-3"
              @click="toggleType(grandchild.typeId)"
              :class="{ 'selected': queryParams.selectedTypeId === grandchild.typeId }">
              {{ grandchild.typeName }}
            </span>
          </div>
        </div>

        <!-- 品牌筛选 -->
        <div class="filter-group">
          <label class="filter-group-label">品牌</label>
          <span
            v-for="brand in commonBrands"
            :key="brand.index"
            class="filter-tag"
            :class="{ 'selected': queryParams.brand === brand.brand }"
            @click="selectBrand(brand.brand)">
            {{ brand.brand }}
          </span>
          
          <!-- 更多品牌 -->
          <div class="brand-more-wrapper" @mouseenter="showAllBrands = true" @mouseleave="showAllBrands = false">
            
            <div class="brand-more-panel" v-if="showAllBrands && commonBrandList.length > 0">
              <span
                v-for="brand in commonBrandList"
                :key="brand.index"
                class="filter-more-tag"
                :class="{ 'selected': queryParams.brand === brand.brand }"
                @click="selectBrand(brand.brand)">
                {{ brand.brand }}
              </span>
            </div>
          </div>
        </div>

        <!-- 型号筛选 -->
        <div class="filter-group" v-if="queryParams.brand">
          <label class="filter-group-label">型号</label>
          <span
            v-for="model in filteredModelOptions"
            :key="model.value"
            class="filter-tag"
            :class="{ 'selected': isModelSelected(model.value)}"
            @click="toggleModelFilter(model.value)" >
            {{ model.label }}
          </span>
        </div>

        <!-- 发布时间筛选 -->
        <div class="filter-group">
          <label class="filter-group-label">发布时间</label>
          <span v-for="options in publishTimeOptions"
              :key="options.value"
              class="filter-tag"
              @click="selectPublishTime(options)"
              :class="{ 'selected': queryParams.timeRange === options.value }">
            {{options.label}}
          </span>
        </div>

        <!-- 价格区间 -->
        <div class="filter-range-group">
          <div class="filter-range-item">
            <label class="filter-label">价格</label>
            <div class="range-inputs">
              <span
              v-for="p in priceRanges"
              :key="p"
              class="tag"
              @click="selectPrice(p)"
              >{{ p }}</span>
            </div>
          </div>
        </div>

        <!-- 省份筛选 -->
        <div class="filter-group">
          <label class="filter-group-label">省份</label>
          <span
            v-for="province in provinceList"
            :key="province.index"
            class="filter-tag"
            @click="selectProvince(province)">
            {{ province }}
          </span>
          <!-- 更多省份 -->
          <div class="brand-more-wrapper" @mouseenter="showAllLocation = true" @mouseleave="showAllLocation = false">
            
            <div class="brand-more-panel" v-if="showAllLocation && allProvinceList.length > 0">
              <span
                v-for="location in allProvinceList"
                :key="location.index"
                class="filter-more-tag"
                :class="{ 'selected': queryParams.location === location }"
                @click="selectProvince(location)">
                {{ location }}
              </span>
            </div>
          </div>
        </div>

        <!-- 已选条件和重置按钮 -->
        <div class="selected-reset-container">
          <div class="selected-filters">
            <span class="selected-title">已选条件：</span>
            <span 
              v-for="filter in activeFilters"
              :key="filter.key"
              class="selected-tag">
              {{ filter.label }}
              <i class="el-icon-close" @click.stop="removeSingleFilter(filter)"></i>
            </span>
          </div>
          <div class="reset-filter-container">
            <button class="reset-btn" @click="handleResetFilter">重置</button>
          </div>
        </div>
      </div>  
     
      <div class="sort-options">
        <el-radio-group v-model="queryParams.sortType" size="small" @change="handleSortChange">
          <el-radio-button label="timeDesc">默认</el-radio-button>
          <el-radio-button label="timeAsc">最新发布</el-radio-button>
        </el-radio-group>
        
        <!-- 价格排序 -->
        <div class="sort-more-wrapper" @mouseenter="showPriceSort = true" @mouseleave="showPriceSort = false">
          <span class="filter-tag more-tag">价格 <i class="el-icon-arrow-down"></i></span>
          <div class="sort-more-panel" v-if="showPriceSort">
            <span 
              class="filter-more-tag"
              :class="{ 'selected': queryParams.sortType === 'priceAsc' }"
              @click="handleSortChange('priceAsc')">价格从低到高</span>
            <span 
              class="filter-more-tag"
              :class="{ 'selected': queryParams.sortType === 'priceDesc' }"
              @click="handleSortChange('priceDesc')">价格从高到低</span>
          </div>
        </div>

        <!-- 使用时间排序 -->
        <div class="sort-more-wrapper" @mouseenter="showHourSort = true" @mouseleave="showHourSort = false">
          <span class="filter-tag more-tag">使用时间 <i class="el-icon-arrow-down"></i></span>
          <div class="sort-more-panel" v-if="showHourSort">
            <span 
              class="filter-more-tag"
              :class="{ 'selected': queryParams.sortType === 'hourAsc' }"
              @click="handleSortChange('hourAsc')">使用时间从低到高</span>
            <span 
              class="filter-more-tag"
              :class="{ 'selected': queryParams.sortType === 'hourDesc' }"
              @click="handleSortChange('hourDesc')">使用时间从高到低</span>
          </div>
        </div>

        <!-- 年份排序 -->
        <div class="sort-more-wrapper" @mouseenter="showYearSort = true" @mouseleave="showYearSort = false">
          <span class="filter-tag more-tag">年份 <i class="el-icon-arrow-down"></i></span>
          <div class="sort-more-panel" v-if="showYearSort">
            <span 
              class="filter-more-tag"
              :class="{ 'selected': queryParams.sortType === 'yearAsc' }"
              @click="handleSortChange('yearAsc')">年份最早</span>
            <span 
              class="filter-more-tag"
              :class="{ 'selected': queryParams.sortType === 'yearDesc' }"
              @click="handleSortChange('yearDesc')">年份最晚</span>
          </div>
        </div>
      </div>
    
      <!-- 设备列表 -->
      <div class="equipment-grid">
        <div class="equipment-card" v-for="equipment in Equipments" :key="equipment.equipmentId">
          <div class="equipment-image-container">
             <div class="media-container" @click="goEquipmentClick(equipment.equipmentId)">
            <img :src="equipment.imageUrl" class="equipment-image" @click="goEquipmentClick(equipment.equipmentId)">
              <!-- 如果有视频，显示三角形播放按钮 -->
                  <div
                    v-if="equipment.videoUrl"
                    class="triangle-play-btn"
                    @click="goEquipmentClick(equipment.equipmentId)"
                  >
                    <div class="triangle-icon"></div>
                  </div>
                  </div>
          </div>
          <div class="equipment-details" @click="goEquipmentClick(equipment.equipmentId)">
            <div class="equipment-meta">
              <p class="meta-main">{{equipment.typeName}}{{equipment.brand }}{{equipment.model}}</p>
              <p class="meta-label">{{equipment.year}}年 | {{equipment.hour}}小时| {{equipment.location }}</p>
              <p class="equipment-price">¥{{ equipment.price/10000 }}万</p>
            </div>
          </div>
        </div>
      </div> 
      
      <!-- 分页控件 -->
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[20, 100, 200, 300, 400]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        class="pagination"
      />
    </div>
  </div>
</template>

<script setup>
import { ref,onMounted } from 'vue';
import  httpInstance  from 'axios';
import { useRouter } from 'vue-router';
import { useCounterStore } from '@/stores/counter';


// 分页切换
const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1;
  fetchData();
};
const handleCurrentChange = (val) => {
  currentPage.value = val;
  fetchData();
};

// 分页参数
const currentPage = ref(1);
const pageSize = ref(4);
const total = ref(0); 
const Equipments = ref([]);

// 筛选状态
const showAllFirstLevel = ref(false);
const showAllBrands = ref(false);
const showAllLocation = ref(false);
const showPriceSort = ref(false);  
const showHourSort = ref(false);
const showYearSort = ref(false);

// 发布时间筛选选项
const publishTimeOptions = ref([
  { label: '近1天', value: 'ONE_DAY' },    
  { label: '近3天', value: 'THREE_DAYS' }, 
  { label: '近1周', value: 'ONE_WEEK' },   
  { label: '近1个月', value: 'ONE_MONTH' },
  { label: '近3个月', value: 'THREE_MONTHS' },
  { label: '3个月以上', value: 'MORE_THAN_THREE_MONTHS' }
]);

// 已选条件列表
const activeFilters = ref([]);

// 价格列表
const priceRanges = ref([
  "5万以下",
  "5-10万",
  "10-20万",
  "20-50万",
  "50-100万",
  "100万以上",
]);

// 筛选参数
const queryParams=ref({
  sortType:'timeDesc',
  selectedTypeId: '', 
  brand: '',      
  model: [],
  minPrice: null,
  maxPrice: null,
  location: '',
  timeRange:[]
})

// 路由跳转
const router = useRouter();

// 存储数据
const provinceList = ref([]);
const allProvinceList = ref([]);
const equipmentTypeSelectList = ref([]);
const equipmentTypeList = ref([]);
const equipmentTypeListErJi = ref([]);
const equipmentTypeListSanJi = ref([]);
const commonBrands = ref([]);
const commonBrandList = ref([]);
const filteredModelOptions=ref([])

// 方法定义
const selectPublishTime = (value) => { 
  // 发布时间
  queryParams.value.timeRange = [value.value];
  activeFilters.value = [value];
  currentPage.value = 1;
  fetchData();
};
//已选择条件
const addActiveFilter = (key, label, value = null) => {
  removeActiveFilter(key);
  if (value !== null && value !== '' && value !== false) {
    activeFilters.value.push({ key, label, value });
  }
};
//删除已选择条件
const removeActiveFilter = (key) => {
  activeFilters.value = activeFilters.value.filter(filter => filter.key !== key);
};

//筛选价格
const selectPrice = (value) => { 
  queryParams.value.minPrice = null;
  queryParams.value.maxPrice = null;
 
  let priceValue = value;

  if (value.includes("以下")) {
    const num = parseInt(value.match(/\d+/)[0], 10)*10000; 
    queryParams.value.maxPrice = num;
  } else if (value.includes("以上")) {
    const num = parseInt(value.match(/\d+/)[0], 10)*10000; 
    queryParams.value.minPrice = num; 
  } else if (value.includes("-")) {
    const [minStr, maxStr] = value.split('-');
    const min = parseInt(minStr.match(/\d+/)[0], 10)*10000; 
    const max = parseInt(maxStr.match(/\d+/)[0], 10)*10000;
    queryParams.value.minPrice = min;
    queryParams.value.maxPrice = max;
  }

  addActiveFilter('price', value, priceValue);
  currentPage.value = 1;
  fetchData();
};

// 型号选中状态
const isModelSelected = (modelValue) => {
  return queryParams.value.model.includes(modelValue);
};

//型号点击事件，切换型号
const toggleModelFilter = (modelValue) => {
  const currentModels = queryParams.value.model;
  const isModelSelected = currentModels.includes(modelValue);

  queryParams.value.model =[]
  activeFilters.value = activeFilters.value.filter(filter => !(filter.key.startsWith('model-')));
 
  if(!isModelSelected){
    queryParams.value.model =[modelValue,]
    addActiveFilter(`model-${modelValue}`, modelValue, modelValue);
  }
  
  currentPage.value = 1;
  fetchData();
};
//跳转到设备详情
const goEquipmentClick = (id) => {
  router.push({ name: 'Shang', params: { equipmentId:id } });
};
//年份，小时数，价格排序
const handleSortChange = (sortType) => {
  // 更新排序参数
  queryParams.value.sortType = sortType; 
  // 重置当前页码
  currentPage.value = 1; 
  fetchData(); 
};
//重置数据
const handleResetFilter = async () => {
  queryParams.value = {
    sortType: 'time_asc',
    selectedTypeId: '',
    brand: '',
    model: [],
    minYear: null,
    maxYear: null,
    minHour: null,
    maxHour: null,
    minPrice: null,
    maxPrice: null,
    location: '',
    timeRange: []
  };
  equipmentTypeListErJi.value = [];
  equipmentTypeListSanJi.value = [];
  activeFilters.value =[];
  currentPage.value = 1;
  await fetchData();
};
// 获取设备列表数据
const selectProvince = (value) => { 
  queryParams.value.location = value;
  addActiveFilter('location', value, value);
  currentPage.value = 1;
  fetchData();
};
// 获取部分省列表数据
const selectProvinceList = async () => {
  let res = await httpInstance.get("/advertisement/selectfrontbaEquipmentLocation");
  const provinces = res.data.data.list.map((item) => {
    let location = item.location;
    if (location) {
      const match = location.match(/^(.+?)省|自治区|市|特别行政区/);
      if (match) {
        location = match[1] || match[0];
      }
    }
    return location;
  });
  provinceList.value = provinces;
};
// 获取所有省份
const allProvinceListApl = async () => {
  let res = await httpInstance.get("/advertisement/selectallEquipmentLocation");
  const provinces = res.data.data.list.map((item) => {
    let location = item.location;
    if (location) {
      const match = location.match(/^(.+?)省|自治区|市|特别行政区/);
      if (match) {
        location = match[1] || match[0];
      }
    }
    return location;
  });
  allProvinceList.value = provinces;
};
//查询所有一级分类
const equipmentTypeSelectListApl = async () => {
  let res = await httpInstance.get("/advertisement/selectallequipmentType_PC");
  equipmentTypeSelectList.value = res.data.data.list;
};
//查询前8 个一级分类
const selectfrontshiJiEquipmentType = async () => {
  let res = await httpInstance.get("/advertisement/selectfrontqiequipmentType_PC");
  equipmentTypeList.value = res.data.data.list;
};
//一级分类选中点击事件
const equipmentTypeSelect = async (value) => { 
  queryParams.value.selectedTypeId = value; 
  let res = await httpInstance.get(`/advertisement/queryfrontshiEquipmentType/${value}`);
  equipmentTypeListErJi.value = res.data.data.list;
  equipmentTypeListSanJi.value = [];
  currentPage.value = 1;
  fetchData();
};
//二级分类点击事件
const equipmentTypeSelectSanJi = async (value) => { 
  queryParams.value.selectedTypeId = value; 
  const selectedType = equipmentTypeListErJi.value.find(type => type.typeId === value);
  if (selectedType) {
    addActiveFilter('selectedTypeId', selectedType.typeName, value);
  }

  let res = await httpInstance.get(`/advertisement/queryfrontshiEquipmentType/${value}`);
  equipmentTypeListSanJi.value = res.data.data.list;
  currentPage.value = 1;
  fetchData();
};
//三级类型点击事件
const toggleType=(value)=>{ 
  queryParams.value.selectedTypeId = value;
  const selectedType = equipmentTypeListSanJi.value.find(type => type.typeId === value);
  if (selectedType) {
    addActiveFilter('selectedTypeId', selectedType.typeName, value);
  }
  currentPage.value = 1;
  fetchData();
}
// 获取设备列表数据分页数据
const fetchData =async () => {
  let res=await httpInstance.post(`/advertisement/queryEquipmentPage/${currentPage.value}/${pageSize.value}`,queryParams.value)
  Equipments.value = res.data.data.list.list;
  total.value = res.data.data.list.total;
}
//切换品牌
const selectBrand = async (brandName) => {
  if (queryParams.value.brand === brandName) {
    queryParams.value.brand = ""; 
    queryParams.value.model = [];
    filteredModelOptions.value = []; 
    removeActiveFilter('brand');
    removeActiveFilter('model'); 
  } else {
    queryParams.value.brand = brandName; 
    await fetchModels(brandName); 
    queryParams.value.model =[]
  }

  addActiveFilter('brand', brandName, brandName);
  currentPage.value = 1;
  fetchData();
};
//获取8个品牌列表
const fetchBrands  =async () => { 
  let res=await httpInstance.get('/advertisement/queryEquipmentBrands')
  commonBrands.value =res.data.data.list
}
//获取所有品牌列表
const fetchBrandList =async () => { 
  let res=await httpInstance.get('/advertisement/selectallEquipmentBrand')
  commonBrandList.value =res.data.data.list
}
//根据品牌获取型号
const fetchModels  =async (brand = '') => { 
  let res=await httpInstance.get(`/advertisement/queryModelsByBrand?brand=${brand}`)
  filteredModelOptions.value = res.data.data.models.map(item => ({
    label: item.model,
    value: item.model
  }));
}

// 初始化数据
onMounted(() => {
  fetchData();
  fetchBrands();
  fetchModels();
  selectfrontshiJiEquipmentType();
  equipmentTypeSelectListApl();
  fetchBrandList();
  selectProvinceList()
  allProvinceListApl();
  if(useCounterStore().typeId!=null){
  equipmentTypeSelect(useCounterStore().typeId)
  //清空typeId
  useCounterStore().typeId=null
  }
  //判断全局变量是否有值
  if(useCounterStore().newGoods!=null){
    handleSortChange(useCounterStore().newGoods)
    //清空全局变量
    useCounterStore().newGoods=null
  }
});
</script>

<style scoped>
.filter-label{
  font-size: 14px;
  color: #666;
  white-space: nowrap;
  margin-right: 8px;
  line-height: 32px;
}
.maiche-text {
  font-size: 20px;
  color: #333;
}
.maiche-text-span {
  color: #999;
  opacity: 0.5;
}
.maiche-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 筛选区域样式 */
.filter-container {
  background-color: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 16px;
  margin: 16px 0;
}
.filter-group {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #f0f0f0;
  position: relative;
}
.filter-group:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.filter-tag {
  padding: 6px 12px;
  background-color: #f5f7fa;
  color: #333;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.filter-tag:hover {
  background-color: #e8f0fe;
  color: #165dff;
}
.filter-tag.selected {
  background-color: #165dff;
  color: #fff;
}
.more-tag {
  color: #165dff;
  border: 1px solid #e1e8ed;
  background-color: #fff;
}
.more-tag:hover {
  background-color: #e8f0fe;
}
.filter-group-label {
  font-size: 14px;
  color: #666;
  white-space: nowrap;
  margin-right: 8px;
  line-height: 32px;
}

/* 更多面板样式 */
.more-panel,
.brand-more-panel {
  position: absolute;
  z-index: 10;
  background-color: #fff;
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  padding: 12px;
  margin-top: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 500px;
}
.filter-more-tag {
  padding: 6px 12px;
  background-color: #f5f7fa;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.filter-more-tag.selected {
  background-color: #165dff;
  color: #fff;
}

/* 价格区间 */
.filter-range-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #f0f0f0;
}
.filter-range-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.range-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tag {
  display: inline-block;
  padding: 6px 12px;
  background-color: #f5f7fa;
  color: #333;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  margin-right: 12px;
}
.tag:last-child {
  margin-right: 0;
}
.tag:hover {
  background-color: #e8f0fe;
  color: #165dff;
}
.tag.selected {
  background-color: #165dff;
  color: #fff;
}

/* 已选条件和重置按钮 */
.selected-reset-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}
.selected-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
}
.selected-title {
  font-size: 14px;
  color: #666;
  white-space: nowrap;
}
.selected-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background-color: #e8f0fe;
  color: #165dff;
  border-radius: 4px;
  font-size: 13px;
}
.selected-tag .el-icon-close {
  font-size: 12px;
  cursor: pointer;
}
.reset-btn {
  padding: 6px 16px;
  border: 1px solid #165dff;
  border-radius: 20px;
  background-color: #fff;
  color: #165dff;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.reset-btn:hover {
  background-color: #e8f0fe;
}

/* 排序区域 */
.sort-options {
  margin: 15px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  gap: 15px;
}
.sort-more-wrapper {
  position: relative;
  cursor: pointer;
}
.sort-more-panel {
  position: absolute;
  z-index: 999;
  background-color: #fff;
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  padding: 12px;
  margin-top: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 160px;
}

/* 设备列表 */
.equipment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin: 20px 0;
}
.equipment-card {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  background-color: #fff;
}
.equipment-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.equipment-image-container {
  width: 100%;
  height: 180px;
  overflow: hidden;
}
.equipment-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.equipment-card:hover .equipment-image {
  transform: scale(1.05);
}
.equipment-details {
  padding: 15px;
}
.equipment-meta {
  font-size: 16px;
}
.equipment-meta .meta-main {
  color: #000;
  margin: 5px 0;
}
.equipment-meta .meta-label {
  margin: 5px 0;
  color: #666;
}
.equipment-meta .equipment-price {
  color: #e53e3e; 
  font-weight: 600; 
  margin: 8px 0;
}

/* 分页 */
.pagination {
  margin: 30px 0;
  text-align: right;
}

/* 分类容器 */
.level-2-container,
.level-3-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #f0f0f0;
}
.filter-tag.level-2 {
  background-color: #edf2fa;
}
.filter-tag.level-3 {
  background-color: #e5edf8;
}

/* 媒体容器和三角形播放按钮 */
.media-container {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
}
.equipment-image .el-image {
  border-radius: 6px;
  width: 100%;
  height: 100%;
}
.triangle-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: all 0.3s ease;
  opacity: 0;
}
.media-container:hover .triangle-play-btn {
  opacity: 1;
}
.triangle-play-btn:hover {
  background: rgba(255, 255, 255, 1);
  transform: translate(-50%, -50%) scale(1.1);
}
.triangle-icon {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent #409eff;
  margin-left: 4px;
}

/* 添加点击动画效果 */
.triangle-play-btn:active {
  transform: translate(-50%, -50%) scale(0.95);
  transition: transform 0.1s ease;
}
</style>